<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>登录界面</title>
    <script src="js/login.js"></script>
    <script type="text/javascript" src="../../plugins/js/jquery-3.3.1.js"></script>

    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>

<body>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="m-container-small m-padded-tb-massive"style="max-width: 30em !important;" >

    <div class="ui container">
        <div id="login" class="ui middle aligned center aligned grid" >
            <div class="column">
                <h2 class="ui teal image header">

                    <div class="content">
                        欢迎登录
                    </div>
                </h2>
                <div class="ui large form">
                    <div class="ui stacked segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" v-model="User.user"  placeholder="账户">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" v-model="User.password"  placeholder="Password">
                            </div>
                        </div>
                        <div class="ui fluid large teal submit button" @click="get">Login</div>
                    </div>

                    <div class="ui error message"></div>

                </div>

                <div class="ui message">
                    New to us? <a href="#">Sign Up</a>
                </div>
            </div>
        </div>

    </div>

</div>





    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
<SCRIPT>
    new Vue({
        el:"#login",
        data() {
            return {
                User:{
                    user: 'ww',
                    password: 123456,
                },

            }
        },
        methods:{
            //aixos 会返回一个Promise对象
            //async 和 await 基于 promise 的。
            //   使用 async 的函数将会始终返回一个 promise 对象
            //   await 关键字只能放到async 函数里面
            async get (){
               let res =await loginApi(this.User);
                let res1=res.data
                if (String(res.data.code) === '1'){
                    alert("登录成功")
                    window.location.href= 'pages/index.html'
               }else{
                    alert(res.data.msg)
               }

            }
        }

    })



</SCRIPT>
</html>





